<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="app">
        <!-- 头部名称 -->
        <header>
            <h3>首页</h3>
        </header>
        <!-- 头部照片 -->
        <div class="headerIoc">
            <img src="./image/jx.jpg" alt="">
        </div>
        <!-- 消息通知 -->
        <div class="messageBox">
            <img src="./image/sound.png" alt="">
            <div class="box">
                <div class="content">
                    <p class="text">一杯香茶叶武夷山桐木关正山小种红茶4盒500克礼品袋 罐装明前金骏眉红茶浓香型;一杯香 茶叶 红茶 金骏眉买1送1共200克礼盒装
                        正宗武夷山桐木关金俊眉正山小种散装;一杯香茶叶 2018新茶明前龙井茶 200克装茶叶明前绿茶散装浓香礼盒装 ;一杯香茶叶安溪铁观音2018新茶4盒共500克礼盒装
                        正宗乌龙茶正宗春茶散装新茶上市;安吉白茶2018新茶明前春茶茶叶 正宗安吉白茶2盒共200g一杯香茶叶绿茶珍稀黄金白茶散装礼盒装小罐;一杯香浓香型茉莉花茶买1送1共500g
                        2018新茶茶叶绿茶礼盒装广西横县福建散装花草茶</p>
                </div>
            </div>

        </div>
        <!-- 商品标题 -->
        <div class="goodsTitle">
            <div class="line">
            </div>
            <div class="title">
                精选好茶
            </div>
            <div class="line">
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="goods">
            <ul class="goodsList">

            </ul>
        </div>
        <div class="bottom">
            <div class="bot">
                <ul class="botList">
                    <li>
                        <img src="./image/首页.png" alt="">
                        <p>首页</p>
                    </li>
                    <li>

                        <img src="./image/分类.png" alt="">
                        <p>分类</p>
                    </li>

                    <li>
                        <img src="./image/购物车.png" alt="">
                        <p>购物车</p>
                    </li>
                    <li>
                        <a href="./my.html">
                            <img src="./image/我的.png" alt="">
                            <p>我</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script src="./js/index.js"></script>
<script src="./js/util.js"></script>
<script>
    let list = document.querySelector('.goodsList'); // 获取茶列表的容器
    myPromiseAjax({
        url: 'http://39.105.198.203:3001/prod/index',
    }).then(data => {

        list.innerHTML = ''; // 清空书籍列表
        console.log(data.data.list);
        // 生成茶列表
        for (let i = 0; i < data.data.list.length; i++) {
            // 使用 data.data.list[i].tid 作为链接的 ID
            list.innerHTML += `<li>
                    <a href='./detail.html?tid=${i + 1}'>
                        <div class="liBox">
                            <div class="ioc">
                                <img src=${data.data.list[i].fullSrc} alt="">
                            </div>
                            <div class="text">
                                <div class="teaName">${data.data.list[i].tname}</div>
                                <div class="teaPrice">¥ <span class="fontBig">${data.data.list[i].price}</span> .00</div>
                            </div>
                        </div>
                    </a>
                </li>`;
        }

    }).catch(err => {

    });
</script>

</html>